<template>
	<div class="zst-box-header-exper-box">
        <a class="title" :href='"http://myq.15988.com/#/jiedu-list;type="+typeId+";issueNo="+issueNo+"?agentId=2335618"'>
          <p>选号前看大神推荐</p>
          <span>更多 ></span>
        </a>
        <div class="swipe-box">
        	<van-swipe class="my-swipe" :autoplay="3000" >
			  <van-swipe-item v-for='(item,index) in datas'>
			  	<a :href='"http://myq.15988.com/#/tjInterpretation/"+item.firstRecommendId+"?agentId=2335618"'>
				  	<img :src="item.icon">
				  	<div class="txt">
				  		<div class="txt-top">
				  			<p>{{item.nickName}}</p><span class="icon1">{{item.record}}</span><span class="icon2">{{item.lhcount}}连红</span>
				  		</div>
				  		<p class="txt-bottom">{{item.description}}</p>
				  	</div>
			  	</a>
			  </van-swipe-item>
			</van-swipe>
        </div>
        
     </div>
</template>
<script>
	import { instance2 } from "@/utils/http"
	export default {
		name:'exper-temp',
		data(){
			return{
				datas:[],
				issueNo:'',
				typeId:'',
			}
		},
		methods:{
		    goUrl(url){
		      window.location.href = url
		    },
		    getData(typeId){
		    	console.log(typeId)
		    	instance2({
			        url: "/static/kjgg/pages/"+typeId+"/zst_experRankRecommends.js?rnd=" + Math.random(),
			    }).then(v=>{
			        let data = v.data;
			        this.datas = data.expertList;
					this.issueNo = data.issueNo;
			    })
		    }
		},
		created(){
			let gid = '';
			if (this.$route.params.gid) {
				gid = this.$route.params.gid
			}else{
				gid = this.$route.path.split('/')[this.$route.path.split('/').length-1]
			}
			let typeId = gid=='01'?'101':gid=='50'?'201':gid=='03'?'102':'202';
			this.typeId = typeId;
			this.getData(typeId)
		},
		mounted(){},
		destroyed(){}
	};
</script>
<style lang="less" scoped>
	a,a:visited,a:link{color: #333;text-decoration: none;}
	.zst-box-header-exper-box{
		padding-top: 45px;
    	.title{
    		display: flex;
    		justify-content: space-between;
    		font-size: 16px;
    		color: #333;
    		padding:10px;
    		font-weight: bold;
    		align-items: center;
    		span{
    			font-size: 12px;
    			color: #5187FF;
    			font-weight: normal;
    		}
    	}
    	.swipe-box{
    		width: 100vw;
    		padding:0px 10px ;
    		overflow: hidden;
    		box-sizing:border-box;
    	}
    	.my-swipe .van-swipe-item a{
	   	 	color: #333;
		    font-size: 16px;
		    display: flex;
		    img{
		    	width: 45px;
		    	height: 45px;
		    	border-radius: 50%;
		    	margin-right: 10px;
		    }
		    .txt{
		    	width: 80%;
		    }
		    .txt-top{
		    	display: flex;
		    	font-size: 14px;
		    	color: #000;
		    	align-items:center;
		    	padding-top:5px;
		    	p{
		    		font-weight: bold;
		    		margin-right: 10px;
		    	}
		    	.icon1{
		    		background: #FFE1E1;
		    		font-size: 10px;
		    		color: #F85C5B;
		    		border-radius:5px;
		    		padding: 0 10px;
		    		height: 15px;
		    		line-height: 16px;
		    		margin-right: 10px;
		    	}
		    	.icon2{
		    		background: #F84948;
		    		font-size: 10px;
		    		color: #fff;
		    		border-radius:5px;
		    		padding: 0 10px;
		    		height: 15px;
		    		line-height: 16px;
		    	}
		    }
		    .txt-bottom{
		    	font-size: 12px;
		    	color: #666;
		    	padding-top:5px;
		    	width: 100%;
		    	overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
		    }
	  	}
	  	/deep/ .van-swipe{
	  		height: 65px;
	  	}
	  	/deep/ .van-swipe__indicators{
	  		bottom:5px !important;
	  	}
	  	/deep/ .van-swipe__indicator{
	  		width: 6px;
	  		height:2px; 
	  		background:#333;
	  	}
	  	/deep/ .van-swipe__indicator--active{
	  		background:#F84948;
	  	}
	}
	

</style>